<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框的全选</title>
</head>
<body>


<div>
    <table>
        <tr>
            <td>
                <input type="checkbox" id="monsiter" onclick="selectAll(this)" >全选
                <button onclick="selectRevose()">反选</button>

            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ids" value="1" onclick="changCheckBox()">
            </td>
        </tr><tr>
        <td>
            <input type="checkbox" name="ids" value="1" onclick="changCheckBox()">
        </td>
    </tr><tr>
        <td>
            <input type="checkbox" name="ids" value="1" onclick="changCheckBox()">
        </td>
    </tr><tr>
        <td>
            <input type="checkbox" name="ids" value="1" onclick="changCheckBox()">
        </td>
    </tr><tr>
        <td>
            <input type="checkbox" name="ids" value="1" onclick="changCheckBox()">
        </td>
    </tr><tr>
        <td>
            <input type="checkbox" name="ids" value="1" onclick="changCheckBox()">
        </td>
    </tr><tr>
        <td>
            <input type="checkbox" name="ids" value="1" onclick="changCheckBox()">
        </td>
    </tr><tr>
        <td>
            <input type="checkbox" name="ids" value="1" onclick="changCheckBox()">
        </td>
    </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    var chs = document.getElementsByName("ids");

    function selectAll(f) {
        //从页面中获取name = ids的控件。
        for (let i in chs) {
           chs[i].checked=f.checked;

        }
    }
    function selectRevose() {
        for (let i in chs) {
            if (chs[i].checked==true){
                chs[i].checked=false;
            }else {
                chs[i].checked=true;
            }
        }
    }
    function changCheckBox() {
        var ch = document.getElementById("monsiter");
        var flag = true;
        for (let i = 0; i < chs.length; i++) {
            if (chs[i].checked==false){
                flag=false;
                break;
            }

        }
        ch.checked=flag;
    }
    function d() {

    }

</script>
</html>